<template>
  <view>
    <view class="container">
      <template v-for="(val, index) in carNumber">
        <view
          :class="['box', { green: isNewEnergy(index) }]"
          :key="index"
          @tap="open(index)"
        >
          <text>{{ val }}</text>
          <view v-if="index === currentIndex" class="box__line" />
          <image
            v-if="isNewEnergy(index) && !val"
            class="box__add"
            src="~@/static/add.png"
          />
        </view>
        <view :key="index" v-if="index === 1" class="point" />
      </template>
    </view>
    <van-popup
      :show="visible"
      :overlay="false"
      :close-on-click-overlay="false"
      position="bottom"
    >
      <view class="popup">
        <view class="header">
          <text @tap="close">关闭</text>
        </view>
        <view class="body">
          <view
            v-for="val in showData"
            :key="val"
            :class="['item', { disabled: disabledData.includes(val) }]"
            @tap="choose(val)"
          >
            {{ val }}
          </view>
          <view @tap="del" class="item">
            <image class="delete-icon" :src="deleteIcon" />
          </view>
        </view>
      </view>
    </van-popup>
  </view>
</template>

<script>
import {
  provinceData,
  numberData,
  charData,
  otherData,
  deleteIcon,
} from "./utils";
export default {
  props: {
    value: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      deleteIcon,
      carNumber: ["", "", "", "", "", "", "", ""],
      currentIndex: -1,
      showData: [],
      disabledData: [],
      visible: false,
    };
  },
  computed: {
    isNewEnergy() {
      return (index) => index === this.carNumber.length - 1;
    },
  },
  watch: {
    carNumber: {
      handler: function () {
        this.$emit("input", this.carNumber.join(""));
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    open(index) {
      this.currentIndex = index;
      this.init();
      this.visible = true;
    },
    close() {
      this.currentIndex = -1;
      this.visible = false;
    },
    choose(val) {
      this.carNumber.splice(this.currentIndex, 1, val);
      if (this.isNewEnergy(this.currentIndex)) return this.close();
      this.currentIndex++;
      this.init();
    },
    del() {
      const val = this.carNumber[this.currentIndex];
      if (val) {
        this.carNumber.splice(this.currentIndex, 1, "");
      } else {
        this.currentIndex--;
      }
      if (this.currentIndex <= -1) this.close();
    },
    init() {
      // 展示数据
      this.showData =
        this.currentIndex === 0
          ? provinceData
          : [...numberData, ...charData, ...otherData];
      // 禁用数据
      this.disabledData = this.currentIndex === 1 ? numberData : [];
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  margin-top: 40rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box {
  width: 72rpx;
  height: 108rpx;
  border: 2rpx solid #eeeeee;
  border-radius: 6rpx;
  margin: 0 2rpx;
  display: flex;
  justify-content: center;
  position: relative;
  align-items: center;
  &.green {
    border-color: #0df059;
    background-color: rgb(13, 240, 89, 0.1);
  }
}
.box__line {
  position: absolute;
  bottom: 6rpx;
  left: 15%;
  height: 2rpx;
  background-color: #0df059;
  width: 70%;
}
.box__add {
  width: 28rpx;
  height: 28rpx;
}
.point {
  width: 18rpx;
  height: 18rpx;
  border-radius: 50%;
  background-color: #333;
  margin: 0 18rpx;
}
// 弹窗
.popup {
  box-shadow: 0 0 30rpx rgba(0, 0, 0, 0.1);
  background-color: #e3e2e7;
}
.header {
  width: 100%;
  height: 78rpx;
  background-color: #fff;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  box-sizing: border-box;
  padding: 0 28rpx;
  font-size: 28rpx;
  color: #377aff;
}
.body {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  box-sizing: border-box;
  padding: 12rpx 0;
}
.item {
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1;
  border-radius: 12rpx;
  width: 66rpx;
  height: 66rpx;
  margin: 8rpx;
  font-size: 28rpx;
  color: #333;
  &.disabled {
    color: #aaa;
    pointer-events: none;
  }
}
.delete-icon {
  width: 34rpx;
  height: 34rpx;
}
</style>
